隨著網絡發展的不斷前進，人們越來越多地借助網絡獲取信息，越來越多的人及公司對網站的要求也越來越高，作為用戶及訪客來說，簡介容易，易用，且具有一定實用性的網頁是最滿足他們需求的。本文將結合一些網頁設計的基礎知識，希望能幫助初學者們打造出一個完美的網頁。

　　一、網頁的基礎架構

　　1、網頁結構

　　網頁文件的結構是以HTML、CSS、JavaScript 3 種語言的組合構成的整體結構，網頁分整體及局部，整體以2、3 層架構排定層次關系，分上、中、下3 個層次，其中局部則以各自的模塊來組織內容，單獨分析每一個模塊用途，尤其是當前受歡迎的12 柵格界面，將以它們作為小構架進行多功能模塊的組合，用以組織內容，表達更多的細節信息。

　　2、Web 設計基本原則

　　網頁設計應遵循“Jakob Nielsen ”等知名專家的設計原則：首先，要學會分離內容與表現，并能夠有效地探索內容;其次，遵循用戶的直覺，以直覺性的方式呈現給用戶;同時，要及時接受新技術，使用最新的設計技術進行轉換;最后要建立一致性，網頁要求界面簡潔規范，便于用戶順利操作瀏覽。

　　3、標準組件使用

　　為保證網頁設計的成功，可以使用WCAG2.0、HTML、AJAX、Flash 等標準化的組件，這些標準組件優化頁面的結構，構建數據傳輸結構，降低訪問時間;同時，可以利用組件庫和框架進行統一管理，克服系統出錯的可能，從而提高系統的安全性。

　　二、網頁布局設計

　　1、柵格布局

　　柵格布局是當前流行的一種布局方式，網頁上的內容以網格的形式排列，內容之間的關系更為清楚。一般以12 柵格比較多見，內容以要求重點進行組織，如果是展示類網頁，可以加入輪播，讓用戶更加關注內容，但也不要讓輪播的間隔太短，使用戶覺得不輕松，布局形式可以采用橫向布局或者豎向布局，當然也可以是全屏情況下的單屏布局。

　　2、流式布局

　　流式布局是一種基于盒模型布局，以容器的形式進行排列內容，更便于網頁的排列，當流式布局結合屬性設置，可以把一些不同屏幕的內容擺放在同一頁面，也就是自適應布局。此外，顏色、背景圖片也能在一定程度上改善網頁的視覺效果，為用戶提供更好的界面體驗。

　　三、網頁交互設計

　　1、Web 2.0 交互設計

　　Web 2.0 交互設計是網頁設計的核心內容，在設計中，交互設計的訴求在于提高網站的用戶體驗，使用戶能夠快速、便捷地找到所需的信息。常見的交互設計手法是搜索功能、分類導航等，在頁面上設置更友好的導航及相關的搜索功能，可以更方便的定位相關文字和圖片，讓用戶輕松快捷的進行網頁的瀏覽。

　　2、動效應用

　　動效設計又稱為交互動效，可以使網頁上的靜態內容具備視覺動效，如圖片翻轉、彈出、展開等，讓靜態圖片的形式為用戶帶來會心一笑的體驗;同時，動效設計也會為網頁提供有趣的體驗;如果網站正在做一些活動，動效的應用可以將活動的整個過程在頁面上帶給用戶精彩的視覺體驗。

　　本文介紹了一些關于網頁設計的基礎原則，以及關于網頁布局設計和網頁交互設計的應用。要想在網頁設計中取得成功，不僅需要掌握基礎知識，更重要的是要配合設計原則，善于借助設計工具熟練使用標準組件和柵格布局，充分利用Web 2.0 交互設計和動效設計，從而為用戶提供出一款完美的網頁體驗。